<template>
  <Row style="height:100%">
    <div class="user">
      用户名:
      <Tooltip content="退出" placement="top">
        <span @click="dropOut">{{this.$store.state.userInfo.userName}}</span>
      </Tooltip>金额:
      <Tooltip content="充值" placement="top">
        <span @click="topUp">{{this.$store.state.account}}</span>
      </Tooltip>
    </div>
    <Col class="hei menu-wapper">
      <Menu style="height:100%" :theme="theme2" :open-names="openNames">
        <Submenu name="1">
          <template slot="title">
            <Icon type="ios-paper" />后台管理
          </template>
          <MenuItem name="1-1">
            <span @click="gotoFun('user')">用户管理</span>
          </MenuItem>
          <MenuItem name="1-2">
            <span @click="gotoFun('commodity')">商品管理</span>
          </MenuItem>
        </Submenu>
        <Submenu name="2">
          <template slot="title">
            <Icon type="ios-paper" />用户界面
          </template>
          <MenuItem name="2-1">
            <span @click="gotoFun('commodityList')">商品列表</span>
          </MenuItem>
          <MenuItem name="2-2">
            <span @click="gotoFun('shoppingCar')">购物车</span>
          </MenuItem>
          <MenuItem name="2-3">
            <span @click="gotoFun('orderList')">订单列表</span>
          </MenuItem>
        </Submenu>
        <!-- <Submenu name="2">
          <template slot="title">
            <Icon type="ios-people" />用户管理
          </template>
          <MenuItem name="2-1">新增用户</MenuItem>
          <MenuItem name="2-2">活跃用户</MenuItem>
        </Submenu>
        <Submenu name="3">
          <template slot="title">
            <Icon type="ios-stats" />统计分析
          </template>
          <MenuGroup title="使用">
            <MenuItem name="3-1">新增和启动</MenuItem>
            <MenuItem name="3-2">活跃分析</MenuItem>
            <MenuItem name="3-3">时段分析</MenuItem>
          </MenuGroup>
          <MenuGroup title="留存">
            <MenuItem name="3-4">用户留存</MenuItem>
            <MenuItem name="3-5">流失用户</MenuItem>
          </MenuGroup>
        </Submenu>-->
      </Menu>
    </Col>
    <Col class="hei router-wapper">
      <router-view />
    </Col>
    <Modal v-model="model" :footer-hide="true" title="充值">
      <div class="form-wap">
        <span>充值金额：</span>
        <InputNumber :min="0" style="width:150px;margin-left:15px;" v-model="number"></InputNumber>
        <Row style="text-align:right">
          <Button style="margin-right:5px" type="primary" @click="cancelFun()">取消</Button>
          <Button type="primary" @click="submitFun()">确认</Button>
        </Row>
      </div>
    </Modal>
  </Row>
</template>
<script>
import { getAccount, addAccount } from '@/api/user'
export default {
  data () {
    return {
      theme2: 'light',
      openNames: ['1', '2'],
      model: false,
      number: 0
    }
  },
  methods: {
    gotoFun (name) {
      this.$router.push({
        name: name
      })
    },
    dropOut () {
      this.$Modal.confirm({
        title: '退出',
        content: '<p>是否退出当前用户?</p>',
        onOk: () => {
          this.$store.commit('setUserInfo', {})
          this.$store.commit('setAccount', 0)
          this.$router.push({
            name: 'login'
          })
        },
        onCancel: () => { }
      })
    },
    topUp () {
      this.model = true
    },
    submitFun () {
      addAccount({
        userId: this.$store.state.userInfo.id,
        updateBalance: this.number
      }).then(res => {
        if (res.code === 1) {
          this.$Message.success('充值成功!')
          this.model = false
          this.number = 0
          getAccount({
            userId: this.$store.state.userInfo.id
          }).then(accres => {
            if (accres.code === 1) {
              this.$store.commit('setAccount', accres.data.balance)
            } else {
              this.$Message.error(accres.message)
            }
          }).catch(accerr => {
            this.$Message.error(accerr)
          })
        } else {
          this.$Message.error(res.message)
        }
      }).catch(err => {
        this.$Message.error(err)
      })
    },
    cancelFun () {
      this.number = 0
    }
  },
  created () {
    console.log(this.$store.state.userInfo.userName)
    if (!this.$store.state.userInfo.userName) {
      this.$router.push({
        name: 'login'
      })
    }
  }
}
</script>
<style lang="less">
.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item {
  padding: 0;
  span {
    width: 100%;
    display: inline-block;
    padding: 14px 24px;
    user-select: none;
  }
}
.user {
  background: #f5f7f9;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  padding-left: 80px;
  padding: 10px 0 10px 250px;
  border-bottom: 1px solid #eee;
  span {
    color: red;
    cursor: pointer;
    padding: 0 10px;
  }
}
.hei {
  height: calc(100% - 45px);
}
.menu-wapper {
  width: 250px;
  display: inline-block;
  float: left;
}
.router-wapper {
  width: calc(100% - 260px);
  display: inline-block;
  float: left;
  overflow-y: scroll;
}
</style>
